﻿@model List<Year>

<link rel="stylesheet" href="~/css/archive/index.min.css" />

<div class="container mt-4 mb-5">
    <div class="row">

        <aside class="col-lg-3 d-none d-lg-block">

            @await Component.InvokeAsync("TopTags")
            <br />
            @await Component.InvokeAsync("Categories")

        </aside>

        <section class="col-lg-9 col-md-12">

            <h2 class="display-4">Archive Timeline</h2>
            <hr>
            <ul class="timeline">

                @foreach (var year in Model)
                {
                    <li class="reveal">
                        <label class="timeline-icon"></label>
                        <div class="timeline-info">
                            <h3>@year.Value</h3>
                            <hr />
                            <div class="timeline-body">
                                <div class="row">

                                    @foreach (var month in year.Months)
                                    {
                                        <div class="col-md-6 col-sm-6 col-6 article-month">
                                            <span class="badge badge-secondary float-right">@month.Articles.Count</span>
                                            <a href="/Blog/Archive/@year.Value/@month.Value">
                                                @System.Globalization.CultureInfo.CreateSpecificCulture("en-GB").DateTimeFormat.GetMonthName(month.Value)
                                            </a>
                                        </div>
                                    }

                                </div>
                            </div>

                        </div>
                    </li>
                }

            </ul>
        </section>

    </div>
</div>